<template>
    <div class="home-person-page">
        <div class="header">
            <a href="javascript:void 0;" class="arrow-back" @click="goBack"><i></i></a>
            <h1 class="cm-header-tit">个人主页</h1>
            <div class="right-wrap">
                <i class="h-setting-icon"></i>
            </div>
        </div>
        <div class="h-page-head">
            <div class="mod-user">
                <div class="mod-user-avatar">
                    <img
                        src="https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eoAzicgLz7U4ZVA6iahx7wqUoI6Z6WSPh1Z7D9V8GDGLUGiaQjJXMxQIccSne9ibDXhK8YhU2PPAOicdAA/132"
                        alt=""
                    />
                </div>
                <div class="mod-user-info">
                    <div class="mod-user-name">恩格拉</div>
                    <div class="mod-user-tips">个性签名：ta太懒了，还没有留下签名</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'DuoduocaiH5HomePerson',

    data() {
        return {};
    },

    mounted() {},

    methods: {
        goBack() {
            this.$router.back();
        },
    },
};
</script>

<style lang="scss" scoped>
.home-person-page {
    width: 100%;
    height: 100%;
    flex: 1;
    display: flex;
    flex-flow: column;
    overflow: hidden;
    flex-direction: column;
    .header {
        position: relative;
        display: flex;
        justify-content: space-between;
        height: 40px;
        align-items: center;
        .cm-header-tit {
            position: absolute;
            top: 0;
            line-height: 40px;
            left: 50%;
            margin-left: -25%;
            width: 50%;
            font-size: 17px;
            color: #333;
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            word-break: keep-all;
            -ms-text-overflow: ellipsis;
            text-overflow: ellipsis;
        }
        .arrow-back {
            position: relative;
            margin-left: 12px;
            top: calc(50% + 3px);
            width: 22px;
            height: 22px;
            z-index: 2;
            border-width: 3px 0 0 3px;
            transform: translateY(-100%) scale(0.5) rotate(-45deg);
            color: #333;
            display: inline-block;
            vertical-align: middle;
            border-style: solid;
            background: transparent;
            border-radius: 6px 0 0 0;
        }
        .header .arrow-back::before {
            position: absolute;
            left: -12px;
            top: -12px;
            right: -12px;
            bottom: -12px;
            content: '';
            z-index: 3;
        }
    }

    .h-page-head {
        .mod-user {
            display: flex;
            padding: 6px 16px;
            .mod-user-avatar {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                margin-right: 10px;
                overflow: hidden;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            .mod-user-name {
                font-size: 16px;
                font-weight: bold;
                line-height: 1.6;
                white-space: nowrap;
                text-overflow: ellipsis;
                width: 100%;
                overflow: hidden;
            }
        }
    }
}
</style>
